<template>
  <div class="app-container home">
    <el-row>
      <el-col :span="24">
        <div class="title-right">
          <div style="display: flex;padding: 6px 0px 0px 20px;">
            <h1 style="color: #4257E9;font-weight: bold">您好，欢迎使用密语认知行业大模型</h1>
          </div>
          <div style="display: flex;padding: 6px 0px 0px 20px; color: #4d4d4d;">
            能够学习和理解人类语言进行对话
          </div>
          <!--          <div style="display: flex;padding: 16px 0px 0px 20px;color: #4d4d4d;">
            高效便捷帮助您获取保密领域相关问题
          </div> -->
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="mid-recom">
          <div style="display: flex;padding: 6px 0px 0px 20px;">
            <h1>推荐助手</h1>
            <div style="padding: 20px 0px 0px 20px;opacity: 0.7;;">使用密语助手，任务一键搞定</div>
            <!-- <el-button type="text" icon="el-icon-refresh" style="margin: 20px 0px 0px 540px;opacity: 0.8;color: #13CE66;">换一批</el-button> -->
          </div>
          <div style="display: flex;padding: 6px 0px 0px 20px; ">
            <el-card shadow="hover" class="card-recom" style="margin-left: 0;">
              <div class="hexagon" style="background-color: #FDE8E9;">
                <div class="left-tip" style="color: #FE4E4F;">人</div>
              </div>
              <div class="card-title">
                脱密期管理
              </div>
              <div class="card-cont" @click="getVal(conVal1)">
                {{conVal1}}
              </div>
            </el-card>
            <el-card shadow="hover" class="card-recom" style="">
              <div class="hexagon" style="background-color: #FDEAD1;">
                <div class="left-tip" style="color: #FF8C0A;">物</div>
              </div>
              <div class="card-title">
                涉密载体
              </div>
              <div class="card-cont" @click="getVal(conVal2)">
                {{conVal2}}
              </div>
            </el-card>
            <el-card shadow="hover" class="card-recom" style="">
              <div class="hexagon" style="background-color: #D9F6F8;">
                <div class="left-tip" style="color: #3874F0;">法</div>
              </div>
              <div class="card-title">
                保密法
              </div>
              <div class="card-cont" @click="getVal(conVal3)">
                {{conVal3}}
              </div>
            </el-card>
            <el-card shadow="hover" class="card-recom" style="">
              <div class="hexagon">
                <div class="left-tip" style="color: #7B38F2;">规</div>
              </div>
              <div class="card-title">
                管理制度
              </div>
              <div class="card-cont" @click="getVal(conVal4)">
                {{conVal4}}
              </div>
            </el-card>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-card name="scrollBox" shadow="never" class="chat-messages">
      <div v-for="(msg, index) in messages" :key="index" :class="{ 'right-message': msg.isMe, 'left-message': !msg.isMe }">
        <div v-if="msg.isMe" class="messageMe">
          <el-card class="message-content">{{msg.text}}</el-card>
          <img class="avatarright" :src="userboy" />
        </div>
        <div class="message" v-else>
          <img class="avatarleft" :src="aipng" />
          <el-card class="message-content">
            {{msg.text}}
            <el-divider class="hengxian" v-if="msg.isJingxuan" content-position="center"></el-divider>
            <el-tag style="margin-right: 75px;" @click="showSource(source)" v-if="msg.isJingxuan" v-for="(source, index_s) in msg.sourceinfo" :key="index_s">{{source.sourcetitle}}</el-tag>

          </el-card>
          <el-tooltip class="item" effect="dark" content="人工已审" placement="top">
            <img style="width: 24px;height: 24px;margin-left: -25px;margin-top: -8px;" v-if="msg.isJingxuan" :src="jingxuan" />
          </el-tooltip>
        </div>
        <!--          <div v-if="msg.isJingxuan" style="display: flex;margin-left: 60px;margin-top: -14px;">

            <el-collapse class="sourcedoc"  accordion style="width: 568px;">
              <el-collapse-item  v-for="(source, index_s) in msg.sourceinfo" :key="index_s" :title="source.sourcetitle">
                <div style="  font-size: 13px;line-height: 24px;font-weight: light;margin: 10px;">... ...{{source.sourcecontext}}... ...</div>
              </el-collapse-item>
            </el-collapse>
          </div> -->

      </div>
      <el-drawer
        :visible.sync="drawer"
        :with-header="false"
         size="40%"
         class="sourcedocright"
         >
         <div style="width: 100%;text-align: center;margin-top: 20px;font-size: 24px;color: #F6F7FF;">《{{sourcename}}》</div>
         <div style="width: 100%;text-align: center;margin-top: 10px;font-size: 16px;color: #F6F7FF;">
           <div>
            {{docSource}}
           </div>
           <div>
           {{docVersion}}
           </div>
           <div>
           {{docBeginTime}}
           </div>
           <div>
           {{docStopTime}}
           </div>
         </div>
        <div style="width: 90%;margin: 35px;font-size: 15px;color: #F6F7FF; line-height: 28px; letter-spacing: .4px;">
        <pre style="white-space: pre-wrap;">{{sourcetext}}</pre>
         </div>
      </el-drawer>
    </el-card>


    <!--       <el-card name="scrollBox" shadow="never" class="chat-messages">
       <div v-for="(msg, index) in messages" :key="index" :class="{ 'right-message': msg.isMe, 'left-message': !msg.isMe }">
         <div v-if="msg.isMe" class="messageMe">
           <pre class="message-content">{{ msg.text }}</pre>
           <img class="avatarright" :src="userboy" />
         </div>
         <div class="message" v-else>
           <img class="avatarleft" :src="aipng" />
           <pre class="message-content">{{ msg.text }}</pre>
              <el-tooltip class="item" effect="dark" content="人工已审" placement="top">
           <img style="width: 24px;height: 24px;margin-left: -25px;margin-top: -8px;" v-if="msg.isJingxuan" :src="jingxuan" />
           </el-tooltip>
         </div>
          <div v-if="msg.isJingxuan" style="display: flex;margin-left: 60px;margin-top: -14px;">
            <el-collapse class="sourcedoc"  accordion style="width: 568px;">
              <el-collapse-item  v-for="(source, index_s) in msg.sourceinfo" :key="index_s" :title="source.sourcetitle">
                <div style="  font-size: 13px;line-height: 24px;font-weight: light;margin: 10px;">... ...{{source.sourcecontext}}... ...</div>
              </el-collapse-item>
            </el-collapse>
          </div>

       </div>
     </el-card> -->
    <div style="display: flex;">
      <el-card class="his-switch" shadow="hover">
        <div style="display: flex;width: 100%;height: 100%;justify-content: center;align-items: center;margin-top: -10px;">
          <div style="font-size: 8px;width: 65px;flex: 1;">多轮对话</div>
          <div style="width: 65px;flex: 1;">
            <el-tooltip class="item" effect="dark" content="开发中..." placement="top">
              <el-switch v-model="val2" inactive-color="#ff4949" disabled>
              </el-switch>
            </el-tooltip>
          </div>
        </div>

      </el-card>
      <el-card class="his-switch" shadow="hover" style="margin-left: 20px;">
        <div style="display: flex;width: 100%;height: 100%;justify-content: center;align-items: center;margin-top: -10px;">
          <div style="font-size: 8px;width: 65px;flex: 1;">思考增强</div>
          <div style="width: 65px;flex: 1;">
            <el-tooltip class="item" effect="dark" content="开发中..." placement="top">
              <el-switch v-model="val1" inactive-color="#ff4949" active-color="#13ce66" disabled>
              </el-switch>
            </el-tooltip>
          </div>
        </div>
      </el-card>
      <el-card class="his-switch" shadow="hover" style="margin-left: 20px;">
        <div style="display: flex;width: 100%;height: 100%;justify-content: center;align-items: center;margin-top: -10px;">
          <div style="font-size: 8px;width: 65px;flex: 1;">记忆增强</div>
          <div style="width: 65px;flex: 1;">
            <el-tooltip class="item" effect="dark" content="开发中..." placement="top">
              <el-switch v-model="val2" inactive-color="#ff4949" active-color="#13ce66" disabled>
              </el-switch>
            </el-tooltip>
          </div>
        </div>
      </el-card>
      <el-card class="his-switch" shadow="hover" style="margin-left: 20px;">
        <div style="display: flex;width: 100%;height: 100%;justify-content: center;align-items: center;margin-top: -10px;">
          <div style="font-size: 8px;width: 65px;flex: 1;">语音识别</div>
          <div style="width: 65px;flex: 1;">
            <el-tooltip class="item" effect="dark" content="开发中..." placement="top">
              <el-switch v-model="val1" inactive-color="#ff4949" active-color="#13ce66" disabled>
              </el-switch>
            </el-tooltip>
          </div>
        </div>
      </el-card>
      <el-button icon="el-icon-delete" round style="width: 120px; height: 35px;margin-left: 169px;margin-top: 8px;background-color: #deeeff;"
        @click="cleanMsg">清空纪录</el-button>
    </div>

    <div class="chat-input">
      <el-input type="textarea" v-model="inputText" placeholder="在此输入您想了解的内容..." :disabled="isSending" :rows="2"></el-input>
      <el-button v-if="loading" type="primary" icon="el-icon-s-promotion" class="send-button" :loading="loading">思考中</el-button>
      <el-button v-else type="primary" icon="el-icon-s-promotion" class="send-button" @click="sendMessage" :loading="loading">发送</el-button>
    </div>
  </div>

</template>

<script>
  import bg1 from '@/assets/images/bg1.png'
  import axios from 'axios';
  import aipng from '@/assets/images/ai.png'
  import userboy from '@/assets/images/user.png'
  import jingxuan from '@/assets/images/jingxuan.png'
  import {
    getGptAddress,
    getGptId,
    getDoc
  } from '@/api/system/gpt.js'
  export default {
    name: "Index",
    data() {
      return {
        // 版本号
        version: "3.8.6",
        bg1: bg1,
        val1: true,
        loading: false,
        val2: false,
        drawer:false,
        aipng: aipng,
        userboy: userboy,
        jingxuan: jingxuan,
        sourcename: '',
        sourcetext: '',
        isShow:0,
        docSource:'',
        docVersion:'',
        docBeginTime:'',
        docStopTime:'',
        activeName: '1',
        xianguandu: 0, //相关度
        inputText: "",
        conVal1: "涉密人员离岗后脱密期应该如何进行管理呢",
        conVal2: "我的红盘在使用期间丢失了应该怎么做",
        conVal3: "保密法规定保密工作的方针是什么",
        conVal4: "涉密人员台账应该记录哪些内容",
        ipapi: "",
        docInfo:{
          docBeginTime:"",
          docContext:"",
          docId:"",
          docSource:"",
          docStopTime:"",
          docTitle:"",
          docVersion:"",
          isShow:0,
        },
        messages: [{
            text: "什么是保密管理经费!",
            isMe: true,
            isJingxuan: false,
            sourceinfo: [{
              sourcetitle: "",
              docBeginTime:"",
              docStopTime:"",
              sourcecontext: "",
              docVersion:"",
              docSource:"",
              isShow:0,
            }, ],
          },
          {
            text: "保密管理经费是涉密信息系统集成资质单位的保密工作经费之一，用于单位保密宣传教育培训、发放保密补贴、奖励保密先进、保密检查等日常保密管理工作。",
            isMe: false,
            isJingxuan: false,
            sourceinfo: [{
            sourcetitle: "",
            docBeginTime:"",
            docStopTime:"",
            sourcecontext: "",
            docVersion:"",
            docSource:"",
            isShow:0,
            }, ],
          },
        ],
        /*        sourceinfo: [{
                    sourcetitle: "",
                    sourcecontext: "",
                    xgd:0,
                  },
                ], */
        ms: {
          knowledge_base_id: "",
          question: "",
          history: []
        },
        inputText: "",
        isSending: false,
      };
    },
    rules: {
      inputName: [{
          required: true,
          message: '请输入活动名称',
          trigger: 'blur'
        },
        {
          min: 1,
          max: 100,
          message: '长度在 1 到 100 个字符',
          trigger: 'blur'
        }
      ]
    },
    methods: {
      goTarget(href) {
        window.open(href, "_blank");
      },
      showSource(source)
      {
       console.log(source)
        if(source.isShow===1)
        {
          this.drawer=true
          this.sourcename=source.sourcetitle
          this.sourcetext=source.sourcecontext
          this.docSource=source.docSource
          this.docVersion=source.docVersion
          this.docBeginTime=source.docBeginTime
          this.docStopTime=source.docStopTime
        }

      },
      updateScrollTop() {

        setTimeout(() => {
          const scrollList = document.getElementsByName('scrollBox')
          for (let i = 0; i < scrollList.length; i++) {
            const x = scrollList[i]
            x.scrollTop = x.scrollHeight
          }
        }, 100);
      },
      sendMessage() {
        if (this.inputText.trim() === '' || this.inputText.trim() === undefined) {
          this.$message({
            message: '请写一点什么再问我吧!',
            type: 'error'
          });
        } else {


          this.loading = true;
          // console.log(this.ipapi);
          if (this.inputText.trim() !== "") {
            this.messages.push({
              text: this.inputText.trim(),
              isMe: true
            });
            this.ms.question = this.inputText;
            this.inputText = "";
            this.updateScrollTop()
            axios.post(this.ipapi, this.ms, {
                headers: {
                  'Access-Control-Allow-Origin': '*',
                  'Content-Type': 'application/json',
                }
              })
              .then(response => {
                /*              this.messages.push({
                                text: response.data.response,
                                isMe: false
                              }) */
                //  console.log(this.messages);
                this.showTypingEffect(response);
                this.inputText = '';
                this.updateScrollTop()
              })
              .catch(error => {
                this.loading = false;
                // 处理错误
              });
          }
        }
      },
      scrollToBottom() {
        this.$nextTick(() => {
          const chatMessages = this.$el.querySelector(".chat-messages");
          chatMessages.scrollTop = chatMessages.scrollHeight;
        });
      },
/*      getDoc(){
       getDoc("资质管理相关").then(res => {
          console.log(res)
       });
      }, */
      getVal(val) {
        this.inputText = val
      },
      cleanMsg() {
        this.$confirm('要清空纪录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.messages = [{
                text: "什么是保密管理经费!",
                isMe: true,
                isJingxuan: false
              },
              {
                text: "保密管理经费是涉密信息系统集成资质单位的保密工作经费之一，用于单位保密宣传教育培训、发放保密补贴、奖励保密先进、保密检查等日常保密管理工作。",
                isMe: false,
                isJingxuan: false
              },
            ],
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
        }).catch(() => {

        });
      },
      getGptAddress() {
        getGptAddress().then(res => {
          this.ipapi = res;
        });
      },
      getGptId() {
        getGptId().then(res => {
          this.ms.knowledge_base_id = res;
        });
      },

      showTypingEffect(data) {
        let i = 0;
        // console.log(data)
        // console.log(data.data.source_documents.length)
        if (data.data.source_documents.length > 0) {
          this.messages.push({
            text: '',
            isMe: false,
            isJingxuan: true,
            sourceinfo: [{}, ],
          });
          /*  this.sourcename=data.data.source_documents[0].split('：\n\n')[0].split('.')[0].replace('出处 [1] ','') //拿到文件名
            this.sourcetext=data.data.source_documents[0].split('：\n\n')[1].split('相关度：')[0] //拿到文件内容
            this.xianguandu=data.data.source_documents[0].split('：\n\n')[1].split('相关度：')[1] //拿到相关度 */
          for (let t = 0; t < data.data.source_documents.length; t++) //组装数据
          {
            //console.log(this.messages)
            this.sourcename = data.data.source_documents[t].split('：\n\n')[0].split('.')[0]
            this.sourcetext = data.data.source_documents[t].split('：\n\n')[1].split('相关度：')[0]
            this.xianguandu = data.data.source_documents[t].split('：\n\n')[1].split('相关度：')[1]
             getDoc("资质管理相关").then(res => {
             this.messages[this.messages.length - 1].sourceinfo[t] = {
               sourcetitle:  res.docTitle,
               sourcecontext: res.docContext,
               docBeginTime:res.docBeginTime,
               docStopTime:res.docStopTime,
               docVersion:res.docVersion,
               docSource:res.docSource,
               isShow:res.isShow,

             }
             });

            console.log(this.messages)
            if (t === 1) {
              break;
            }
          }


        } else {
          this.messages.push({
            text: '',
            isMe: false,
            isJingxuan: false
          });
        }

        let timer = setInterval(() => {
          this.messages[this.messages.length - 1].text += data.data.response.charAt(i);
          i++;

          if (i > data.data.response.length) {
            clearInterval(timer);
            this.loading = false;
            this.updateScrollTop()
          }
        }, 30);
      }


    },
    created() {
      this.getGptAddress();
      this.getGptId();
   //   this.getDoc();
    },
    mounted() {
      // this.scrollToBottom();

    },
  };
</script>

<style scoped lang="scss">
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }

    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }

    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    width: 950px;
    // font-family: "open sans",
    // "Helvetica Neue",
    // Helvetica,
    // Arial,
    // sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;
    margin-left: auto;
    margin-right: auto;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }

    .title-left {
      height: 150px;
      background-color: #E2EEFF;
    }

    .title-right {
      height: 100px;
      background-color: #E2EEFF;
      background-image: url(../assets/images/bg1.png);
      background-size: 50% 100%;
      background-repeat: no-repeat;
      background-position: right;
      border-radius: 20px 20px 20px 20px;
    }

    .chat-input {
      display: flex;
      width: 100%;
      margin-top: 8px;

    }

    .chat-messages {
      margin-top: 20px;
      height: 470px;
      flex: 1;
      overflow-y: auto;
      border-radius: 20px 20px 20px 20px;
    }

    .right-message {
      display: block;
      text-align: left;
    }

    .left-message {
      display: block;
      text-align: left;
    }

    .message {
      display: flex;
      margin-top: 20px;
      font-size: 14px;
      line-height: 24px;
      // font-family: "sans-serif";
      letter-spacing: .4px;
      //color: #737373;
      font-weight: 400;
    }

    .messageMe {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      font-size: 14px;
      line-height: 24px;
      letter-spacing: .4px;
    }

    .cardcontext {
      width: 70%;
    }

    .message-content {
      overflow: hidden;
      //white-space: nowrap;
      animation: typing 5s steps(40) infinite;
      display: inline-block;
      //background-color: #e5e7eb50;
      margin-left: 0px;
      margin-right: 10px;
      margin-top: 0px;
      padding-bottom: -10px;
      // padding: 10px;
      border-radius: 6px;
      max-width: 70%;
      /* 设置最大宽度为父容器的宽度 */
      overflow: hidden;
      /* 超出部分隐藏 */
      word-wrap: break-word;
      /* 自动换行 */
      white-space: pre-wrap;
    }

    .avatarleft {
      align-self: flex-start;
      width: 40px;
      height: 40px;
    }

    .avatarright {
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: flex-end;
    }

    .mid-recom {
      margin-top: 20px;
      background-color: #F3F8F9;
      height: 200px;
      border-radius: 20px 20px 20px 20px;
    }

    .card-recom {
      position: relative;
      width: 210px;
      height: 110px;
      background-color: #F0F5FF;
      border-radius: 10px 10px 10px 10px;
      margin-left: 10px;
    }

    .send-button {
      margin-left: 15px;
    }

    .his-switch {
      //background-color: #E1F3D8;
      width: 140px;
      height: 33px;
      margin-top: 10px;
      border-radius: 70px 70px 70px 70px;
    }

    .hexagon {
      position: absolute;
      top: -12px;
      left: -3px;
      width: 50px;
      height: 50px;
      background-color: #ECE3FE;
      clip-path: polygon(50% 0, 100% 29%, 100% 71%, 50% 100%, 0 71%, 0 29%);
    }

    .left-tip {
      margin-top: 15px;
      margin-left: 17px;
      font-size: 16px;
    }

    .card-title {
      font-size: 14px;
      display: flex;
      //font-weight: 300;
      // font-family: "SimHei", sans-serif;
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
    }

    .card-cont {
      font-size: 14px;
      display: flex;
      margin-top: 15px;
      //font-weight: 300;
      // font-family: "SimHei", sans-serif;
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
      opacity: 0.7;
    }

    .sourcedoc {
      ::v-deep .el-collapse-item__header {
        /* 自定义样式 */
        height: 28px;

        //background-color: red;
        //border-radius: 20px 20px 20px 20px;
      }
    }
    .sourcedocright {
      ::v-deep .el-drawer {
        /* 自定义样式 */
         border-radius: 20px 0px 0px 0px;
         background-color:#1d3055;
        //background-color: red;
        //border-radius: 20px 20px 20px 20px;
      }
    }

   .el-divider--horizontal
     {
       margin-top: 5px;
       margin-bottom: 5px;


    }

  }
</style>
